<template>
	<view class="main">
		<header-vue :back="true" title="反馈详情">
		</header-vue>
		<view class="list">
			<view class="white-box" style="background: #fff;padding-bottom: 28rpx;">
				<view class="flex start font30 fontbold-500">
					<image src="/static/mine/title-icon.png" class="title-icon"></image>
					<view>反馈内容</view>
				</view>
				<view class="content-box">
					<textarea  v-model="textarea" placeholder="请输入您的问题..." disabled></textarea>
                    <view class="uploader">
                        <view class="thumb" v-for="(img, idx) in images" :key="img.id">
                            <image :src="img.path" mode="aspectFill" class="thumb-img"></image>
                            <!-- <view class="thumb-del" @click="removeImage(idx)">×</view> -->
                        </view>
                        <!-- <view class="add-tile" v-if="images.length < maxImages" @click="chooseImage">
                            <view class="camera-icon">
                                <u-icon name="camera" size="30" color="#666"></u-icon>
                            </view>
                            <text class="add-text">上传照片</text>
                        </view> -->
                    </view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image src="/static/mine/title-icon.png" class="title-icon"></image>
					<view>联系方式</view>
				</view>
				<view class="flex form-item font28">
					<input v-model="content_info" class="font28"  placeholder="请输入联系电话" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
    import { feedbackDetail } from '@/api/index.js'

	export default {
		data() {
			return {
                textarea:'',
                content_info:'',
                images: [],
                maxImages: 9,
			}
		},
		components: {
			headerVue,
		},
        onLoad(options) {
            feedbackDetail({id:options.id}).then(res =>{
                console.log('res',res);
                this.textarea = res.data.content
                this.images = res.data.images
                this.content_info = res.data.contact_info
            })
        },
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
            chooseImage() {
                const remaining = this.maxImages - this.images.length
                if (remaining <= 0) return
                const that = this
                uni.chooseImage({
                    count: remaining,
                    sizeType: ['compressed'],
                    sourceType: ['album','camera'],
                    success(res) {
                        const files = (res.tempFiles || [])
                        files.forEach((item) => {
                            that.images.push(item)
                        })
                    }
                })
            },
            // removeImage(index) {
            //     this.images.splice(index, 1)
            // },
		},
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.white-box {
		min-height: 200rpx;
		background: linear-gradient(180deg, #F5FBFF 0%, #FFFFFF 12%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding: 40rpx 28rpx 0;
		box-sizing: border-box;
		margin-top: 28rpx;

		.content-box {
			width: 100%;
			height: 510rpx;
			background: #FAFAFA;
			border-radius: 12rpx;
			margin-top: 26rpx;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
		}

		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

	}

	.form-item {
		height: 118rpx;
		box-sizing: border-box;

		.icon-jiantou {
			margin-left: 8rpx;
			margin-right: 0;
		}

		.flex {
			width: 400rpx;
		}

		input {
			width: 100%;

			::v-deep .input-placeholder {
				color: #AAAAAA;
			}
		}
	}

	.upload-img {
		width: 120rpx;
		height: 140rpx;
		border-radius: 8rpx;
		border: 1rpx solid #999999;
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
	}
    .uploader {
        display: flex;
        flex-wrap: wrap;
        margin-top: 24rpx;
    }
    .thumb {
        position: relative;
        width: 148rpx;
        height: 160rpx;
        border-radius: 4rpx;
        overflow: hidden;
        margin-right: 25rpx;
        margin-bottom: 20rpx;
    }
    
    .thumb:nth-child(4n) {
        margin-right: 0;
    }
    .thumb-img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .thumb-del {
        position: absolute;
        right: 6rpx;
        top: 6rpx;
        width: 20rpx;
        height: 20rpx;
        background: rgba(0,0,0,0.55);
        color: #fff;
        border-radius: 50%;
        font-size: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .camera-icon {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12rpx;
    }
    .add-text {
        font-size: 24rpx;
        color: #999;
    }
    .add-tile {
        width: 148rpx;
        height: 160rpx;
        border-radius: 4rpx;
        background: #F8F8F8;
        border: 2rpx dashed #ddd;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #999;
    }
	.btn-buy {
		padding: 0 26rpx;
		height: 76rpx;
		border-radius: 60rpx;
		color: $uni-text-color-inverse;
		width: 100%;
		box-sizing: border-box;
		margin-top: 100rpx;
		background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
	}
</style>